<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Include draw.io Diagram</title>
<script src="connectUtils-1-4-8.js" type="text/javascript"></script>
<script src="../new_common/cac.js" type="text/javascript"></script>
<script src="../onedrive_common/ac.js" type="text/javascript"></script>
<script src="../gdrive_common/gac.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/viewer-static.min.js"></script>
<script src="../onedrive_common/editor.js" type="text/javascript"></script>
<script src="../gdrive_common/editor.js" type="text/javascript"></script>
<script src="../att_common/att-editor.js" type="text/javascript"></script>
<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.9.12/css/aui.min.css" media="all">
<style type="text/css">
body {
	font-family:Arial, sans-serif;
	overflow:hidden;
	height:100%;
	width:100%;
	margin:0;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
	width: 100%;
	height: 100%;
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.diagram {
	border:1px solid #ddd;
	display:inline-block;
	vertical-align:top;
	border-radius:3px;
	overflow:hidden;
	font-size:14pt;
	cursor:pointer;
	margin:5px;
}

#errorMsg {
  position:absolute;
  bottom:10px;
  left:0px;
  right:0px;
  text-align:center;
  overflow:hidden;
  color:red;
  opacity: 0;
  transition: opacity 1s; 
}

#errorMsg.fade {
  opacity: 1;
}
</style>
</head>
<body style="height:100%">
	<!-- Tab links -->
	<div class="tab">
	  <button id="currentTab" class="tablinks" data-tabContetn="current">Current Diagram</button>
	  <button id="recentTab" class="tablinks" data-tabContetn="recent">Recent Diagrams</button>
	  <button id="searchTab" class="tablinks" data-tabContetn="search">Search</button>
	  <button id="gDriveTab" class="tablinks" data-tabContetn="gDrive">Google Drive</button>
	  <button id="oneDriveTab" class="tablinks" data-tabContetn="oneDrive">OneDrive</button>
	  <button id="uploadTab" class="tablinks" data-tabContetn="upload">Upload</button>
	  <button id="extUrlTab" class="tablinks" data-tabContetn="extUrl">From URL</button>
	  <button id="csvTab" class="tablinks" data-tabContetn="csvImp">CSV Import</button>
	</div>
	
	<!-- Tab content -->
	<div id="current" class="tabcontent" style="padding: 0">
	</div>
	
	<div id="recent" class="tabcontent">
	  <div id="recentList" style="width:100%; height: 100%">
			
	  </div>
	</div>
	
	<div id="search" class="tabcontent">
	    <div class="field-group">
			<label for="searchStr" style="display:inline-block;">Search:</label> <input class="text medium-field" id="searchStr" value="" placeholder="Diagram Name">
			<button class="aui-button aui-button-primary ap-dialog-submit" id="searchBtn">Search</button>
		</div>
	    <div id="searchList"  style="width:100%; height: 100%">
			
		</div>
	</div>
	
	<div id="gDrive" class="tabcontent" style="padding: 0;height:100%;">
		<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:42px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filename">File name</label> 
					<input class="text macro-param-input" type="text" id="filenameGD" name="filename" disabled placeholder="Choose a file...">
					<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerGD" disabled>Choose</button>
					<div id="spinner-containerGD"></div>
					<div class="description">Google Drive file name</div>
					<div class="error" id="filenameErrorGD"></div>
				</div>
				<div style="display: none">
					<div class="field-group" style="padding-left:15px;">
						<label for="widthGD">Width</label> <input class="text medium-field" id="widthGD" value="800">
						<div class="description">Width of the viewer (px)</div>
						<div class="error" id="widthErrorGD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="heightGD">Height</label> <input class="text medium-field" id="heightGD" value="600">
						<div class="description">Height of the viewer (px)</div>
						<div class="error" id="heightErrorGD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input class="checkbox small-field" id="autoSizeGD" type="checkbox" >
						<label for="autoSizeGD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
					</div>
					<div class="field-group" style="padding-left:15px">
						<label for="thumbImg">Thumbnail</label>
						<div class="thumbnail">
							<img class="thumbImg" id="thumbImgGD">
						</div>
					</div>
					<div class="field-group" style="padding-left:15px">
						<input type="checkbox" class="checkbox small-fiel" id="useDrawioGD">
						<label for="useDrawio" style="display:inline-block;">Preview in draw.io</label>
					</div>
				</div>
				<a id="signoutGD" style="position: absolute;bottom: 2px;right: 5px;font-size: 11px;cursor: pointer;">Sign Out</a>
			</form>
		</div>
		<div id="previewGD" style="bottom:0px;left:351px;position:absolute;top:42px;right:0px;display:inline-block;">
			<a id="gdAnchor" style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer">Choose a file...</a>
		</div>
	</div>
	
	<div id="oneDrive" class="tabcontent" style="padding: 0;height:100%">
		<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:42px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filenameOD">File name</label> 
					<input class="text macro-param-input" type="text" id="filenameOD" name="filename" disabled placeholder="Choose a file...">
					<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerOD" disabled>Choose</button>
					<div id="spinner-containerOD"></div>
					<div class="description">OneDrive file name</div>
					<div class="error" id="filenameErrorOD"></div>
				</div>
				<div style="display: none">
					<div class="field-group" style="padding-left:15px;">
						<label for="widthOD">Width</label> <input class="text medium-field" id="widthOD" value="800">
						<div class="description">Width of the viewer (px)</div>
						<div class="error" id="widthErrorOD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="heightOD">Height</label> <input class="text medium-field" id="heightOD" value="600">
						<div class="description">Height of the viewer (px)</div>
						<div class="error" id="heightErrorOD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input class="checkbox small-field" id="autoSizeOD" type="checkbox" >
						<label for="autoSizeOD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
					</div>
					<div class="field-group" style="padding-left:15px">
						<label for="thumbImgOD">Thumbnail</label>
						<div class="thumbnail">
							<img class="thumbImg" id="thumbImgOD">
						</div>
					</div>
					<div class="field-group" style="padding-left:15px">
						<input type="checkbox" class="checkbox small-fiel" id="useDrawioOD">
						<label for="useDrawioOD" style="display:inline-block;">Preview in draw.io</label>
					</div>
				</div>
				<a id="signoutOD" style="position: absolute;bottom: 2px;right: 5px;font-size: 11px;cursor: pointer;">Sign Out</a>
			</form>
		</div>
		<div id="previewOD" style="bottom:0px;left:351px;position:absolute;top:42px;right:0px;display:inline-block;">
			<a id="odAnchor" style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer">Choose a file...</a>
		</div>
	</div>
	
	<div id="upload" class="tabcontent" style="padding: 0;height:100%">
		<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:42px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="filenameUD">File name</label> 
					<input type="file" id="fileuploadUD" style="display: none">
					<input class="text macro-param-input" type="text" id="filenameUD" name="filename" disabled placeholder="Choose a file...">
					<button class="aui-button aui-button-primary ap-dialog-submit" id="filePickerUD">Choose</button>
					<div id="spinner-containerUD"></div>
					<div class="description">Diagram file name</div>
					<div class="error" id="filenameErrorUD"></div>
				</div>
				<div style="display: none">
					<div class="field-group" style="padding-left:15px;">
						<label for="widthUD">Width</label> <input class="text medium-field" id="widthUD" value="800">
						<div class="description">Width of the viewer (px)</div>
						<div class="error" id="widthErrorUD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<label for="heightUD">Height</label> <input class="text medium-field" id="heightUD" value="600">
						<div class="description">Height of the viewer (px)</div>
						<div class="error" id="heightErrorUD"></div>
					</div>
					<div class="field-group" style="padding-left:15px;">
						<input class="checkbox small-field" id="autoSizeUD" type="checkbox" >
						<label for="autoSizeUD" style="display:inline-block;font-size:12px">Automatically set the size of the viewer</label>
					</div>
				</div>
				<div class="error" id="errorMsgUD">
				</div>
			</form>
		</div>
		<div id="previewUD" style="bottom:0px;left:351px;position:absolute;top:42px;right:0px;display:inline-block;text-align: center;">
			<a id="fileUploadAnchor" style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer">Choose a file...</a>
		</div>
	</div>
	
	<div id="extUrl" class="tabcontent" style="padding: 0;height:100%">
		<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:42px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="diagramName">Diagram Name</label> 
					<input class="text large-field" id="diagramName" value="" placeholder="Diagram Name"><br>
					<label for="diagramUrl">Diagram URL</label> 
					<input class="text large-field" id="diagramUrl" value="" placeholder="Diagram URL"><br>
					<button class="aui-button aui-button-primary" style="margin: 5px;float: right;" id="showDiagBtn">Show Diagram</button>
				</div>
				<div class="error" id="errorMsgUD">
				</div>
			</form>
		</div>
		<div id="extUrlDiagram" style="bottom:0px;left:351px;position:absolute;top:42px;right:0px;display:inline-block;text-align: center;">
			<span style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" >Diagram Preview</span>
		</div>
	</div>
	<div id="csvImp" class="tabcontent" style="padding: 0;height:100%">
		<div style="bottom:0px;width:350px;border-right:1px solid #cccccc;position:absolute;top:42px;display:inline-block;">
			<form class="aui top-label" style="height:100%;top:0px;">
				<div class="field-group" style="padding-left:15px;">
					<label for="csvDiagName">Diagram Name</label> 
					<input class="text large-field" id="csvDiagName" value="" placeholder="Diagram Name"><br>
					<label for="csvFileUrl">CSV File URL</label> 
					<input class="text large-field" id="csvFileUrl" value="" placeholder="CSV File URL"><br>
					<button class="aui-button aui-button-primary" style="margin: 5px;float: right;" id="convertBtn">Generate</button>
				</div>
				<div class="error" id="errorMsgUD">
				</div>
			</form>
		</div>
		<div id="csvDiagram" style="bottom:0px;left:351px;position:absolute;top:42px;right:0px;display:inline-block;text-align: center;">
			<span style="display:block;text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer" >Diagram Preview</span>
		</div>
	</div>
	<div id="errorMsg">
		 
	</div>
	<script src="includeDiagram-1-4-8.js" type="text/javascript"></script>
</body>
</html>
